<template>
  <div class="box" style="height: 700px;overflow-y: auto;padding-right: 10px">
    <el-form v-loading="loading" ref="pram" :model="pram" :rules="rules" label-width="120px" @submit.native.prevent>
      <el-form-item label="标题" prop="title">
        <el-input v-model="pram.title" maxlength="28" placeholder="请输入标题" />
      </el-form-item>
      <el-form-item label="月薪" prop="salaryLevel">
        <el-input v-model="pram.salaryLevel" maxlength="20" placeholder="请输入月薪" />
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model.number="pram.sort" type="number" maxlength="3" placeholder="请输入排序" />
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <Tinymce v-model="pram.content"></Tinymce>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handlerSubmit('pram')">{{ isCreate===0?'确定':'更新' }}</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      title="上传图片"
      :visible.sync="showChooseImage"
      width="896px"
      :before-close="handleClose"
      :modal="false"
    >
      <upload-index v-if="showChooseImage" :checkedMore="[]" :isMore="'1'" @getImage="getImage" />
    </el-dialog>
  </div>
</template>

<script>
import {
  saveRecruit
} from '@/api/entrepreneurship'
import { Debounce } from '@/utils/validate'
import Tinymce from "@/components/Tinymce/index";
export default {
  name: "ArticleEdit",
  components:{Tinymce},
  props: {
    isCreate: {
      type: Number,
      required: true
    },
    articleType:{
      type:Array,
      default:()=>[],
    },
    editData: {
      type: Object,
      default: null
    },
  },
  data() {
    return {
      showChooseImage:false,
      loading:false,
      pram: {
        id: 0,
        title:'',
        coverImage:'',
        content:'',
        sort:0,
        salaryLevel:''
      },
      rules: {
        title: { required: true, message: '请填写标题', trigger: ['blur'] },
        salaryLevel: { required: true, message: '请填写月薪', trigger: ['blur'] },
        content: { required: true, message: '请填写内容', trigger: ['blur'] },
      },
    }
  },
  mounted() {
    this.initEditData();
  },
  methods: {
    handleClose(){
      this.showChooseImage=false
    },
    getImage(img,type) {
      this.pram.coverImage=img[0].attDir;
      this.showChooseImage=false;
    },
    close() {
      this.$emit('hideEditDialog')
    },
    initEditData() {
      if (this.isCreate !== 1) return //不是编辑页，即新增页则直接返回
      const {  id,title,coverImage,content,sort,salaryLevel} = this.editData
      this.pram.id=id;
      this.pram.title=title;
      this.pram.coverImage=coverImage;
      this.pram.content=content;
      this.pram.sort=sort;
      this.pram.salaryLevel=salaryLevel;
    },
    handlerSubmit:Debounce(function(form) {
      this.$refs[form].validate(valid => {
        if (!valid) return
        this.loading=true;
        saveRecruit(this.pram).then(data => {
          this.$message.success('保存成功')
          this.$emit('hideEditDialog')
        }).finally(()=>{
          this.loading=false;
        })
      })
    }),
  }
}
</script>
<style>
.box::-webkit-scrollbar{
  width: 0;
}
</style>
